<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>DHTML Tree samples. dhtmlXTree - Linked form</title>
</head>
<style>
	body {font-size:12px}
	.{font-family:arial;font-size:12px}
	h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
	xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
</style>
<body>
	<h1>Linked form</h1>
	<link rel="STYLESHEET" type="text/css" href="../css/dhtmlXTree.css">
	<script  src="../js/dhtmlXCommon.js"></script>
	<script  src="../js/dhtmlXTree.js"></script>
	<script  src="../js/dhtmlXTree_if.js"></script>
    Linked form extension allow to create per-item forms, which can be shown by user defined action under required item.
	<table>
		<tr>
			<td>
				<div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"/>
			</td>
			<td rowspan="2" style="padding-left:25" valign="top">
            <div>
			Form <a href="javascript:void(0)" onclick="tree.showItemForm('af')"> Show </a> | <a href="javascript:void(0)" onclick="tree.hideItemForm('af')">Hide</a>
            </div>
			</td>
		</tr>
		<tr>
			<td></td>
		</tr>
	</table>
<hr>
<XMP>
<div id="treeboxbox_tree" style="width:200;height:200"></div>
<script>
	tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
            tree.defineItemForm("my_form");
            tree.setFormAppearOn(false,true,false);
            tree.setFormDisappearOn(false,false,true);
            tree.setOnFormInitialisation(m_test_1);
            tree.setOnFormDismissal(m_test_2);
				
            tree.setImagePath("../imgs/");
            tree.loadXML("tree3.xml")
            ...
            tree.showItemForm("af");
            tree.hideItemForm();
</script>
</XMP>

	<script>
            function m_test_1(tree,node,state){
                var f=document.getElementById("my_text");
                f.value=state.toString()+":"+tree.getItemText(node);
                return true;
            }
            function m_test_2(tree,node,state){
                //
                return true;
            }

			tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
            tree.defineItemForm("my_form");
            tree.setFormAppearOn(false,true,false);
            tree.setFormDisappearOn(false,false,true);
            tree.setOnFormInitialisation(m_test_1);
            tree.setOnFormDismissal(m_test_2);

			tree.setImagePath("../imgs/");
			tree.enableSmartXMLParsing(true);
			tree.loadXML("tree.xml");

	</script>
<br><br>

    <div id="my_form" style='width:230px; border:1px solid red; background-color:silver;' onselectstart="return true; event.cancelBubble();">
        Some form here<br/>
        Node <input id="my_text" type="text" value=""><br/>
        <input onclick="alert('Some action')" type="Button" value='save'>
    </div>

</body>
</html>
